<template>
  <div class="title" :style="{color: color, backgroundColor: backgroundColor}">
    <span class="line" :style="{backgroundColor: color}" />
    {{ title }} <span>{{ num }}</span>
  </div>
</template>
<script>
export default {
  name: 'Title',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    color: {
      type: String,
      default: '#000'
    },
    backgroundColor: {
      type: String,
      default: '#fff'
    },
    num: {
      type: Number,
      default: null
    }
  },
  data() {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
.title{
    width: 100%;
    height: 36px;
    line-height: 36px;
    font-weight: 700;
}
.line{
    display: inline-block;
    width: 4px;
    height: 18px;
    margin: 0 8px;
    vertical-align: middle;
    transform: translateY(-2px);
}
</style>
